<template>
	<view class="container">
		<nav-bar title="全部服务" />
		<template v-if="serviceGroup">
			<view class="group" v-for="(type, typeIndex) in serviceGroup.keys()" :key="typeIndex">
				<text class="type">{{ type }}</text>
				<view class="services">
					<view class="service" v-for="(service, index) in serviceGroup.get(type)" :key="service.id" @click="goService(service.serviceName)">
						<image class="image" :src="service.imgUrl | imagePathCompletion" />
						<text class="name">{{ service.serviceName }}</text>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		getServiceList
	} from '@/api/common.js'
	export default {
		data() {
			return {
				serviceGroup: null
			}
		},
		onLoad() {
			this.getServiceList();
		},
		methods: {
			// 获取服务列表
			getServiceList() {
				const _that = this;
				getServiceList()
					.then((res) => {
						const serviceList = res.rows;
						// 服务分组
						_that.serviceGroup = new Map();
						for (let i = 0; i < serviceList.length; i++) {
							const type = serviceList[i].serviceType;
							if (_that.serviceGroup.has(type)) {
								_that.serviceGroup.get(type).push(serviceList[i]);
							} else {
								_that.serviceGroup.set(type, [serviceList[i]]);
							}
						}
					})
					.catch(() => {
						uni.showToast({
							title: '加载异常'
						})
					})
			},
			// 跳转到应用服务
			goService(name) {
				if (name == '城市地铁') {
					uni.navigateTo({
						url: '/pages/metro/index'
					});
				} else {
					uni.navigateTo({
						url: `/pages/service/detail?title=${encodeURIComponent(name)}`
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.group {
			width: 100vw;
			overflow: hidden;
			background-color: $uni-bg-color;
			margin: 1rem 0;

			.type {
				width: 96vw;
				height: 2rem;
				display: block;
				line-height: 2rem;
				padding: 0 2vw;
				border-bottom: 1rpx solid $uni-bg-color-grey;
			}

			.services {
				width: 95vw;
				overflow: hidden;
				padding: 0.4rem 2.5vw;
				display: grid;
				grid-template-columns: repeat(5, 20%);
				
				.service {
					width: 19vw;
					overflow: hidden;
					text-align: center;
					
					.image {
						width: 11vw;
						height: 11vw;
					}

					.name {
						display: block;
						font-size: 0.8rem;
					}
				}
			}
		}
	}
</style>
